<template>
  <div id="app" :class="{ 'dark-mode': shouldApplyDarkMode }">
    <router-view v-slot="{ Component, route }">
      <transition :name="appTransitionName || undefined">
        <keep-alive :exclude="['Video']">
          <component :is="Component" :key="route.name || route.path" />
        </keep-alive>
      </transition>
    </router-view>

    <LoginRegister />

    <nav v-if="!isVideoPage" :class="{ 'dark-nav': isRecommendPage || shouldApplyDarkMode }">
      <router-link to="/home" class="nav-item" active-class="active">
        <span>首页</span>
        <van-icon name="wap-home-o" size="20" />
      </router-link>
      <router-link to="/community" class="nav-item" active-class="active">
        <span>社区</span>
        <van-icon name="comment-o" size="20" />
      </router-link>
      <router-link to="/find" class="nav-item" active-class="active">
        <span>发现</span>
        <van-icon name="search" size="20" />
      </router-link>
      <router-link to="/my" class="nav-item" active-class="active">
        <span>我的</span>
        <van-icon name="manager-o" size="20" />
      </router-link>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useDarkModeStore } from '@/stores/darkMode';
import LoginRegister from '@/components/LoginRegister.vue';

const route = useRoute();
const darkModeStore = useDarkModeStore();

// 判断是否是视频页面，如果是则隐藏底部导航
const isVideoPage = computed(() => route.path.startsWith('/video'));

// 判断当前是否是推荐页（用于底部导航栏样式切换）
const isRecommendPage = computed(() => {
  return route.fullPath.includes('/home/Recommend');
});

// 判断是否应该应用夜间模式（排除首页推荐页）
const shouldApplyDarkMode = computed(() => {
  return darkModeStore.isDarkMode && !isRecommendPage.value;
});

// 根据主导航顺序决定左右滑动方向
const appTransitionName = ref('slide-left');
let lastOrder = typeof route.meta.order === 'number' ? (route.meta.order as number) : 0;
let orderBeforeVideo: number | null = null; // 保存进入视频页前的 order

// 获取路由的 order（如果是子路由，返回父路由的 order）
const getRouteOrder = (routePath: string): number => {
  // 检查是否是首页的子路由
  if (routePath.startsWith('/home')) {
    return 0;
  }
  // 检查社区页
  if (routePath.startsWith('/community')) {
    return 1;
  }
  // 检查发现页
  if (routePath.startsWith('/find')) {
    return 2;
  }
  // 检查我的页
  if (routePath.startsWith('/my')) {
    return 3;
  }
  // 默认返回 0
  return 0;
};

watch(
  () => route.fullPath,
  (newPath, oldPath) => {
    const isFromVideo = oldPath?.startsWith('/video');
    const isToVideo = newPath.startsWith('/video');

    // 如果从视频页面退出，使用向右滑出动画
    if (isFromVideo && !isToVideo) {
      appTransitionName.value = 'slide-right';
      // 恢复进入视频页前的 order
      if (orderBeforeVideo !== null) {
        lastOrder = orderBeforeVideo;
        orderBeforeVideo = null;
      }
      return;
    }

    // 如果进入视频页面，使用向左滑入动画
    if (isToVideo && !isFromVideo) {
      appTransitionName.value = 'slide-left';
      // 保存进入视频页前的 order
      orderBeforeVideo = lastOrder;
      return;
    }

    // 如果从观看记录页面退出，禁用 App 层的动画，让组件自己处理退出动画
    if (oldPath?.startsWith('/watch-history') && !newPath.startsWith('/watch-history')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是进入观看记录页面，禁用 App 层的动画，让组件自己处理进入动画
    if (newPath.startsWith('/watch-history')) {
      appTransitionName.value = '';
      return;
    }

    // 如果从免责声明页面退出，禁用 App 层的动画，让组件自己处理退出动画
    if (oldPath?.startsWith('/disclaimer') && !newPath.startsWith('/disclaimer')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是进入免责声明页面，禁用 App 层的动画，让组件自己处理进入动画
    if (newPath.startsWith('/disclaimer')) {
      appTransitionName.value = '';
      return;
    }

    // 如果从意见反馈页面退出，禁用 App 层的动画，让组件自己处理退出动画
    if (oldPath?.startsWith('/feedback') && !newPath.startsWith('/feedback')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是进入意见反馈页面，禁用 App 层的动画，让组件自己处理进入动画
    if (newPath.startsWith('/feedback')) {
      appTransitionName.value = '';
      return;
    }

    // 如果从排行榜页面退出，禁用 App 层的动画，让组件自己处理退出动画
    if (oldPath?.startsWith('/rank') && !newPath.startsWith('/rank')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是进入排行榜页面，禁用 App 层的动画，让组件自己处理进入动画
    if (newPath.startsWith('/rank')) {
      appTransitionName.value = '';
      return;
    }

    // 如果从收藏页面退出，禁用 App 层的动画，让组件自己处理退出动画
    if (oldPath?.startsWith('/favorites') && !newPath.startsWith('/favorites')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是进入收藏页面，禁用 App 层的动画，让组件自己处理进入动画
    if (newPath.startsWith('/favorites')) {
      appTransitionName.value = '';
      return;
    }

    // 如果从关注页面退出，禁用 App 层的动画，让组件自己处理退出动画
    if (oldPath?.startsWith('/my-follow') && !newPath.startsWith('/my-follow')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是进入关注页面，禁用 App 层的动画，让组件自己处理进入动画
    if (newPath.startsWith('/my-follow')) {
      appTransitionName.value = '';
      return;
    }

    // 如果是同一个主路由下的子路由切换，禁用 App 层的动画
    // 让子组件自己处理动画
    const currentMainRoute = getRouteOrder(newPath);
    const previousMainRoute = oldPath ? getRouteOrder(oldPath) : lastOrder;

    if (currentMainRoute === previousMainRoute && oldPath && oldPath !== newPath) {
      // 同一个主路由下的子路由切换，禁用动画（设置为空字符串）
      appTransitionName.value = '';
      return;
    }

    // 其他情况根据主导航顺序决定左右滑动方向
    const currentOrder = getRouteOrder(newPath);
    const previousOrder = oldPath ? getRouteOrder(oldPath) : lastOrder;

    // 如果是首次加载或路由初始化，使用默认的 slide-left
    if (oldPath === undefined || oldPath === '') {
      appTransitionName.value = 'slide-left';
      lastOrder = currentOrder;
      return;
    }

    appTransitionName.value = currentOrder >= previousOrder ? 'slide-left' : 'slide-right';
    lastOrder = currentOrder;
  },
  { immediate: true }
);
</script>

<style lang="less">
@import '@/assets/reset.css';

.slide-left-enter-active {
  animation: slide-left-in 0.25s ease-out;
}

.slide-left-leave-active {
  animation: slide-left-out 0.25s ease-in;
}

.slide-right-enter-active {
  animation: slide-right-in 0.25s ease-out;
}

.slide-right-leave-active {
  animation: slide-right-out 0.25s ease-in;
}

@keyframes slide-left-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-left-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-right-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-right-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}
</style>

<style scoped lang="less">
#app {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease, color 0.3s ease;

  &.dark-mode {
    background-color: #000;
    color: #fff;
  }
}

nav {
  width: 100%;
  height: 6vh;
  position: fixed;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 5vw;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
  z-index: 50;
  transition: background-color 0.3s ease, color 0.3s ease;

  .nav-item {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    font-size: 14px;
    height: 200%;
    transform: translateY(25%);
    transition: all 0.3s ease-in-out;
    color: #000;

    &.active {
      transform: translateY(-25%);
    }

    span {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    i {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  // 推荐页样式：黑底白字
  &.dark-nav {
    background-color: #000;

    .nav-item {
      color: #fff;

      span {
        color: #fff;
      }

      :deep(.van-icon) {
        color: #fff;
      }
    }
  }
}
</style>
